<template>
	<view>
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000" backState="1000">
			<view class="title-box"><text>借出记录</text></view>
		</z-nav-bar>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="mainBox">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="rowLine">
						<text class="title">借调开始日期:</text>
						<text class="value">{{ item.startTime | filterNull }}</text>
					</view>
					<view class="rowLine">
						<text class="title">预约借调结束日期:</text>
						<text class="value">{{ item.estimateEndTime | filterNull }}</text>
					</view>
					<view class="rowLine">
						<text class="title">预约借调天数:</text>
						<text class="value">{{ item.estimateDay || 0 }}天</text>
					</view>
					
					<template v-if="item.secondedStatus==2">
						<view class="rowLine">
							<text class="title">实际借调结束日期:</text>
							<text class="value">{{ item.actualEndTime | filterNull }}</text>
						</view>
						<view class="rowLine">
							<text class="title">实际借调天数:</text>
							<text class="value">{{ item.actualDay | filterNull }}</text>
						</view>
						
					</template>
					
					<view class="rowLine">
						<text class="title">托管费用:</text>
						<text class="value">{{ item.hostingFees || 0 }}元</text>
					</view>
					
					<view class="rowLine">
						<text class="title">结算状态:</text>
						<text v-if="item.secondedStatus==2" class="value">{{ item.settlementStatus == 2?'已结算': '待结算'}}</text>
						<text v-else class="value">--</text>
					</view>

					<image
						v-if="item.secondedStatus == 1"
						class="statusImg"
						src="https://qykh.shopec.com.cn/image-server/dz/second_status1.png"
						mode="aspectFill"
					></image>
					<image
						v-else
						class="statusImg"
						src="https://qykh.shopec.com.cn/image-server/dz/second_status2.png"
						mode="aspectFill"
					></image>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import * as carOwnerApi from '@/api/carOwner-api.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			carId: '',
			list: []
		};
	},
	onLoad(op) {
		this.carId = op.carId;
	},
	methods: {
		//获取列表
		upCallback(page) {
			console.log(this.currentTenantObj);
			let param = {
				pageNum: page.num,
				pageSize: page.size,
				carId: this.carId,
				secondedType: 2
			};
			carOwnerApi
				.ownerList(this.toParams(param))
				.then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.mainBox {
	padding: 20rpx 20rpx 0;
	.item {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		position: relative;
		.rowLine {
			padding: 12rpx 0;
			font-size: 28rpx;
			.title {
				color: #666;
				margin-right: 10rpx;
			}
			.value {
				color: #333;
			}
		}
		.statusImg {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 120rpx;
			height: 120rpx;
		}
	}
}
</style>
